<template>
  <s-layout title="套餐详情">
    <div class="page">
      <!-- <image
        class="info_image"
        src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/static/Demonstration/content.png"
        mode="widthFix"
      />

      <image
        class="info_bottom"
        src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/static/Demonstration/FunctionField.png"
        mode="widthFix"
      /> -->

      <swiper class="swiper" :circular="true" :autoplay="true" :interval="3000">
        <swiper-item v-for="item in 3" :key="item">
          <view class="swiper-item">
            <image
              :src="`https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/static/merchant/banner/banner${item}.png`"
              mode="aspectFill"
            />
          </view>
        </swiper-item>
      </swiper>

      <!-- 套餐信息 -->

      <!-- 团购套餐卡片 -->
      <div class="package_card">
        <!-- 价格信息区域 -->
        <div class="price_info">
          <!-- 头部：总销量和优惠后金额 -->
          <div class="price_header">
            <div class="total_sales"> <span>总销量:</span><span class="value">1257</span> </div>
            <div class="final_price_label">
              <span>优惠后金额</span>
            </div>
          </div>

          <!-- 价格计算详情 -->
          <div class="price_calculation">
            <div class="price_item">
              <div class="price_label">原价</div>
              <div class="price_value">¥29.9</div>
            </div>
            <div class="operator">-</div>
            <div class="price_item">
              <div class="price_label">优惠价</div>
              <div class="price_value">¥10.0</div>
            </div>
            <div class="operator">=</div>
            <div class="final_price">¥19.90</div>
          </div>
        </div>

        <!-- 套餐标题 -->
        <div class="package_title"
          >团购套餐名称团购套餐名称团购套餐名称团购套餐名称团购套餐名称团购套餐名称</div
        >

        <!-- 购买信息 -->
        <div class="purchase_info">
          <div class="info_item">
            <span class="info_label">购买限制</span>
            <span class="info_value">商品每人每日限购3张</span>
          </div>
          <div class="info_item">
            <span class="info_label">购买须知</span>
            <span class="info_value">周一至周日 09:30-23:00可用 ></span>
          </div>
          <div class="info_item">
            <span class="info_label">服务保障</span>
            <span class="info_value">随时退 · 过期退</span>
          </div>
        </div>
      </div>

      <!-- 团购套餐详情 -->
      <div class="package_detail">
        <div class="detail_title">团购详情</div>

        <!-- 分类名称A -->
        <div class="category_section">
          <div class="category_title">分类名称A</div>
          <div class="category_items">
            <div class="item_row">
              <div class="item_name">2级分类菜品1</div>
              <div class="item_info">
                <span class="item_count">(1份)</span>
                <span class="item_price">¥2003</span>
              </div>
            </div>
            <div class="item_row">
              <div class="item_name">2级分类菜品1</div>
              <div class="item_info">
                <span class="item_count">(1份)</span>
                <span class="item_price">¥23</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 分类名称B -->
        <div class="category_section">
          <div class="category_title">分类名称B</div>
          <div class="category_items">
            <div class="item_row">
              <div class="item_name">2级分类菜品1</div>
              <div class="item_info">
                <span class="item_count">(1份)</span>
                <span class="item_price">¥2003</span>
              </div>
            </div>
            <div class="item_row">
              <div class="item_name">2级分类菜品1</div>
              <div class="item_info">
                <span class="item_count">(1份)</span>
                <span class="item_price">¥23</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 分类名称C -->
        <div class="category_section">
          <div class="category_title">分类名称C</div>
          <div class="category_items">
            <div class="item_row">
              <div class="item_name">2级分类菜品1</div>
              <div class="item_info">
                <span class="item_count">(1份)</span>
                <span class="item_price">¥2003</span>
              </div>
            </div>
            <div class="item_row">
              <div class="item_name">2级分类菜品1</div>
              <div class="item_info">
                <span class="item_count">(1份)</span>
                <span class="item_price">¥23</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 备注信息 -->
        <div class="remark_section">
          <div class="remark_title">备注</div>
          <div class="remark_content">
            富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本
          </div>
        </div>
      </div>

      <!-- 购买须知卡片 -->
      <div class="purchase_notice">
        <div class="notice_title">购买须知</div>

        <!-- 有效期 -->
        <div class="notice_section">
          <div class="section_title">
            <span>有效期</span>
          </div>
          <div class="section_content">2025年3月3日 至 2025-05-03 23:59:59</div>
        </div>

        <!-- 使用时间 -->
        <div class="notice_section">
          <div class="section_title">
            <span>使用时间</span>
          </div>
          <div class="section_content">9:30 - 次日01:00</div>
        </div>

        <!-- 使用规则 -->
        <div class="notice_section">
          <div class="section_title">
            <span>使用规则</span>
          </div>

          <div
            class="section_content"
            :style="{
              maxHeight: showMore ? 'none' : '100rpx',
              overflow: showMore ? 'visible' : 'hidden',
            }"
          >
            <div class="rule_item">• 规则内容1</div>
            <div class="rule_item"
              >•
              内容2规则内容2规则内容2规则内容2规则内容2规则内容2规则内容2规则内容2规则内容2规则内容2规则内容2规则内容2规则内容2规则内容2规则内容2规则内容2规则内容2规则内容2规则内容2规则内容2规则内容2规则内容2规则内容2规则内容2规则内容2规则内容2规则内容2规则内容2规则内容2规则内容2规则内容2规则内容2规则内容2规则内容2规则内容2</div
            >
          </div>
        </div>

        <!-- 查看更多按钮 -->
        <div class="view_more_btn" @click="toggleShowMore">
          <span>{{ showMore ? '收起' : '点击查看更多' }}</span>
          <image src="" mode="aspectFit" class="arrow_down" />
        </div>
      </div>

      <!-- 团购套餐卡片 -->
      <div class="tuangou_list">
        <div class="package_card_title">
          <div class="ico">套</div>
          <div class="package_card_title_text">团购套餐</div>
        </div>

        <div v-for="item in 4" :key="item">
          <package-card
            :logo_url="`http://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/static/home/groop/${item}.png`"
            title="名称团购套餐名称团购套餐名称名称团购套餐名称团购套餐名称名称团购套餐名称团购套餐名称"
            available_time="周一至周日 可用"
            current_price="12.8"
            original_price="29.8"
            @click="sheep.$router.go('/pages/tuangou/tuangou_info')"
          />
        </div>
      </div>

      <!-- 底部购买按钮 -->
      <div class="bottom_purchase_bar">
        <div class="price_section">
          <div class="current_price">¥19.90</div>
          <div class="original_price">¥29</div>
        </div>
        <div class="buy_now_btn">
          <text>立即抢购</text>
        </div>
      </div>
    </div>
  </s-layout>
</template>

<script setup>
  import PackageCard from '@/components/package-card.vue';
  import sheep from '@/sheep';
  import { ref } from 'vue';
  // 查看资质方法
  const view_qualification = () => {
    console.log('查看资质');
    // 这里可以添加查看资质的逻辑
  };

  // 控制规则内容的展开收起
  const showMore = ref(false);

  // 切换展开/收起状态
  const toggleShowMore = () => {
    showMore.value = !showMore.value;
  };
</script>

<style lang="less" scoped>
  image {
    width: 100%;
    height: 100%;
  }
  .page {
    padding-bottom: 150rpx;
  }
  .swiper {
    height: 400rpx;
    width: 100%;
    // z-index: -1;
    // position: relative;

    .swiper-item {
      width: 100vw;
      height: 100%;
    }
  }

  .package_card {
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    margin: 10px;

    // 价格信息区域
    .price_info {
      background: #fff7f7;
      border-radius: 8px;
      padding: 10px 15px;
      margin-bottom: 15px;

      // 价格头部
      .price_header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;

        .total_sales {
          font-size: 14px;
          color: #666;

          .value {
            color: #333;
            font-weight: bold;
            margin-left: 2px;
          }
        }

        .final_price_label {
          font-size: 14px;
          color: #ff4d4f;
        }
      }

      // 价格计算
      .price_calculation {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;

        .price_item {
          .price_label {
            font-size: 12px;
            color: #666;
            margin-bottom: 5px;
          }

          .price_value {
            font-size: 14px;
            color: #ff4d4f;
            font-weight: bold;
          }
        }

        .operator {
          margin: 0 10px;
          color: #666;
          font-size: 14px;
          padding-bottom: 2px;
        }

        .final_price {
          font-size: 20px;
          color: #ff4d4f;
          font-weight: bold;
        }
      }
    }

    // 套餐标题
    .package_title {
      font-size: 16px;
      color: #333;
      font-weight: bold;
      margin-bottom: 15px;
      line-height: 1.4;
    }

    // 购买信息
    .purchase_info {
      .info_item {
        display: flex;
        margin-bottom: 10px;
        font-size: 14px;

        .info_label {
          color: #666;
          margin-right: 10px;
          white-space: nowrap;
        }

        .info_value {
          color: #333;
          flex: 1;
        }

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }

  // 团购套餐详情样式
  .package_detail {
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    margin: 10px;

    .detail_title {
      font-size: 16px;
      color: #333;
      font-weight: bold;
      margin-bottom: 15px;
    }

    // 分类部分
    .category_section {
      margin-bottom: 15px;

      .category_title {
        font-size: 14px;
        color: #333;
        font-weight: bold;
        margin-bottom: 10px;
      }

      .category_items {
        .item_row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 10px;
          font-size: 14px;

          .item_name {
            color: #333;
          }

          .item_info {
            display: flex;
            align-items: center;

            .item_count {
              color: #999;
              margin-right: 10px;
            }

            .item_price {
              color: #333;
              font-weight: bold;
            }
          }

          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }

    // 备注部分
    .remark_section {
      .remark_title {
        font-size: 14px;
        color: #333;
        font-weight: bold;
        margin-bottom: 10px;
      }

      .remark_content {
        font-size: 14px;
        color: #666;
        line-height: 1.5;
      }
    }
  }

  // 购买须知卡片样式
  .purchase_notice {
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    margin: 10px;

    .notice_title {
      font-size: 16px;
      color: #333;
      font-weight: bold;
      margin-bottom: 15px;
    }

    .notice_section {
      margin-bottom: 15px;

      .section_title {
        margin-bottom: 10px;
        font-size: 14px;
        color: #333;
        font-weight: bold;
      }

      .section_content {
        font-size: 14px;
        color: #666;
        line-height: 1.5;
        padding-left: 15px;
        transition: max-height 0.3s ease;

        .rule_item {
          margin-bottom: 8px;
          text-align: left;

          &:last-child {
            margin-bottom: 0;
          }
        }
      }

      &:last-child {
        margin-bottom: 0;
      }
    }

    .view_more_btn {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 10px;
      color: #666;
      font-size: 14px;
      padding: 0 15px;
      height: 44px;
      border-radius: 4px;
      cursor: pointer;

      .arrow_down {
        width: 12px;
        height: 12px;
        margin-left: 5px;
        transform: rotate(0deg);
        transition: transform 0.3s;
      }
    }
  }

  .tuangou_list {
    margin: 10px;
    background-color: #fff;
    border-radius: 10px;

    .package_card_title {
      padding: 15px 10px 10px 10px;
      font-size: 28rpx;
      color: #333;
      font-weight: bold;
      display: flex;
      align-items: center;

      .ico {
        width: 50rpx;
        height: 50rpx;
        margin-right: 10rpx;
        line-height: 50rpx;
        background-color: #ff4d4f;
        color: white;
        font-size: 26rpx;
        text-align: center;
      }
    }
  }

  // 底部购买按钮样式
  .bottom_purchase_bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100rpx;
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30rpx;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    z-index: 999;

    // 价格部分
    .price_section {
      display: flex;
      align-items: baseline;

      // 当前价格
      .current_price {
        font-size: 40rpx;
        font-weight: bold;
        color: #ff5040;
      }

      // 原价
      .original_price {
        font-size: 28rpx;
        color: #999;
        margin-left: 10rpx;
        text-decoration: line-through;
      }
    }

    // 立即抢购按钮
    .buy_now_btn {
      width: 240rpx;
      height: 70rpx;
      background: linear-gradient(to right, #ff6a6a, #ff4040);
      border-radius: 35rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      
      text {
        color: #ffffff;
        font-size: 30rpx;
        font-weight: bold;
      }
    }
  }
</style>
